<template>
  <div class="custom-menu-body">
    <div class="custom-content-query">
      <el-input
        v-model="blurry"
        placeholder="请输入内容"
        @input.native="filterSelect"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" />
      </el-input>
    </div>
    <el-scrollbar class="custom-content-ul" style="height: 100%;overflow-y: auto">
      <div v-for="(item,index) in dataList" :key="index" class="custom-content-li" :style="active === item.id ?activeStyle: null" @click="activeClick(item)">
        <div class="custom-content-image" style="width: 2rem">
          <div class="custom-image"><i class="el-icon-collection-tag" /></div>
        </div>
        <div class="custom-content-li-title">{{ item.name }}</div>
        <div class="custom-content-image">
          <div class="custom-image"><i class="el-icon-arrow-right" /></div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { queryAllFlByOrganization } from '@/api/config/special';
import { isEmpty } from 'lodash';
export default {
  name: 'PortalLeftOrganization',
  props: {
    column: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      activeStyle: { },
      dataList: [],
      oldList: [],
      blurry: '',
      active: null,
      baseURL: process.env.VUE_APP_BASE_API // api 的 base_url
    };
  },
  watch: {
    column: {
      handler(newData, oldData) {
        this.activeStyle = { backgroundColor: '#f5f5f5', color: newData.theme, borderLeft: '2px solid' + newData.theme, boxShadow: '0 2px 3px 0 rgba(0, 0, 0, 0.1)' };
        this.initData();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    init() {
      this.active = null;
    },
    initData() {
      queryAllFlByOrganization().then(res => {
        const { data } = res;
        if (!isEmpty(data)) {
          this.dataList = data.data;
          this.oldList = data.data;
        }
      }).catch(() => {
        console.log('初始化数据失败！');
      });
    },
    activeClick(item) { // 选择
      this.active = item.id;
      this.$emit('callBack', item);
    },
    filterSelect() {
      if (this.blurry) {
        this.dataList = this.oldList.filter(item => {
          if (item.title.includes(this.blurry)) {
            return item;
          }
        });
      } else {
        this.dataList = this.oldList;
      }
    }
  }
};
</script>

<style scoped>
.custom-menu-body{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.custom-content-query {
  flex: 0 1 auto;
  height: 5rem;
  border-bottom: 1px solid #e2e2e2;
  padding: 0.875rem 0.625rem;
  box-sizing: border-box;
  line-height: 3rem;
}
.custom-content-ul {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
}
.custom-content-li {
  width: 100%;
  height: 4rem;
  flex: 0 1 auto;
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
}
.custom-content-image {
  flex: 0 1 auto;
  width: 4rem;
  text-align: center;
  line-height: 2rem;
  padding: 1rem;
  box-sizing: border-box;
}
.custom-content-li-title{
  flex: 1 1 auto;
  line-height: 4rem;
  text-align: left;
  padding: 0 0.5rem;
  font-size: 1.0625rem;
  box-sizing: border-box;
}
.custom-image {
  width: 100%;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
